﻿(function ($) {
    $.fn.ratioView = function (option) {
        option = $.extend({
            widthRatio: null,
            heightRatio: null
            /*
            ratio: 1(1%) , "#1"(1px) 
            */
        }, option);
        return this.each(function () {
            var view = $(this);
            var settings = $.extend({}, option);
            if (settings.widthRatio == null) {
                settings.widthRatio = view.attr("widthRatio");
            }
            if (settings.heightRatio == null) {
                settings.heightRatio = view.attr("heightRatio");
            }
            if (settings.widthRatio == null && settings.heightRatio == null) return;
            view.layout(function () {
                var parentWidth = view.parent().width();
                var parentHeight = view.parent().height();
                if (settings.widthRatio != null) {
                    if (settings.widthRatio.substr(0, 1) == "#") {
                        var width = Math.round(settings.widthRatio.substring(1) * 1);
                        view.width(width);
                    } else if (!isNaN(settings.widthRatio)) {
                        var width = Math.round(parentWidth * settings.widthRatio / 100);
                        
                        view.width(width);
                    }
                }
                if (settings.heightRatio != null) {
                    if (settings.heightRatio.substr(0, 1) == "#") {
                        var height = Math.round(settings.heightRatio.substring(1) * 1);
                        view.height(height);
                    } else if (!isNaN(settings.heightRatio)) {
                        var height = Math.round(parentHeight * settings.heightRatio / 100); 
                        
                        view.height(height);
                    }
                }
            });
            //            $(window).resize(function () {
            //                view.trigger("layout");
            //            });
            view.layout();
            // view.trigger("layout");
        });
    }
})(jQuery);